<script lang='ts' setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getProject, getUsedProject } from "@/api/index"
const { proxy } = getCurrentInstance();
// proxy 替代 this
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();

const data = reactive({
  currentProjectIndex: 666 as number | string,//默认激活菜单,主页
  usedMeunList: [] as any[]
})
onBeforeMount(() => {

})
onMounted(() => {
  _getUsedProject()
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
  ...toRefs(data)
})
const emit = defineEmits(["changeMeun"])
//获取用户最近常用菜单
const _getUsedProject = async () => {
  getUsedProject({}).then((res: any) => {
    console.log(res)
    data.usedMeunList = res
    emit("changeMeun", res)
    console.log(data.usedMeunList, "-----------")
  }).catch((err) => {
    console.log(err)
  })
}
//选择一级菜单
const handleOneMeun = async (meunId: number | string) => {
  data.currentProjectIndex = meunId
  getProject({
    a: 1
  }).then((res) => {
    console.log(res, "jjajaj")
    emit("changeMeun", res)
  }).catch((err) => {
    console.log(err)
  })
}
</script>

<template>
  <div class="left-meun common-scorllBar">
    <div class="top-logo">
      <p><span></span><span>学习频道</span></p>
      <p>——公测版——</p>
    </div>
    <div class="module-list">
      <div class="fixed-module">
        <div class="module-container">
          <div class="module head">
            <img src="https://img2.baidu.com/it/u=3131230941,162238898&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
              alt="">
          </div>
        </div>
        <div class="module-container">
          <div :class="['module', data.currentProjectIndex == 666 ? 'active' : '']" @click="handleOneMeun(666)">
            <!-- <span>消息</span> -->
            <SvgIcon name="message" :size="30" />
          </div>
        </div>
        <div class="module-container">
          <div :class="['module', data.currentProjectIndex == 888 ? 'active' : '']" @click="handleOneMeun(888)">
            <SvgIcon name="shouye" :size="30" />
          </div>
        </div>
        <div style="width: 60%;margin: 0 auto;">
          <ElDivider />
        </div>
      </div>
      <div class="module-scorll">
        <div class="module-container" v-for="(item, index) in data.usedMeunList" :key="item.id">
          <div :class="['module', data.currentProjectIndex == item.id ? 'active' : '']" @click="handleOneMeun(item.id)">
            <span>{{ item.text }}</span>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<style scoped lang='scss'>
.module-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  overflow: auto;
  position: relative;

  @include scroll-bar(6px, #ccc);


  .module-scorll {
    display: flex;
    flex-direction: column;
    align-items: center;

    .module-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px 0;
      width: 80px;
      height: 80px;

      .module {
        width: 74px;
        height: 74px;
        background-color: #fff;
        transform: scale(0.95);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .2s ease;
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;

        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }
      }

      .module:hover {
        transform: scale(1.05);
      }

      .active {
        transform: scale(1);
        border: 2px solid #0f67ec;
      }
    }

  }

  .fixed-module {
    width: 100%;
    position: sticky;
    z-index: 999;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(242, 242, 242);

    .head {
      background: none !important;
    }

    .module-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px 0;
      width: 80px;
      height: 80px;

      .module {
        width: 74px;
        height: 74px;
        background-color: #fff;
        transform: scale(0.95);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .2s ease;
        border-radius: 10px;
        overflow: hidden;
        // box-sizing: border-box;

        img {
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }
      }

      .module:hover {
        transform: scale(1.05);
      }

      .active {
        transform: scale(1);
        border: 2px solid #0f67ec;
      }
    }
  }
}

.left-meun {
  width: 100px;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.top-logo {
  padding: 1rem 0;

  p {
    font-size: 12px;
    text-align: center;
  }

  p:first-child {
    font-size: 0.5rem;
  }

}
</style>